<template>
  <div id="content">
    <!-- sideBar 侧边栏-->
    <div class="sideBar">
      <!-- 最新推荐-->
      <div class="sideBox" id="sideZxtj">
        <div class="hd">
          <h3><span>最新推荐</span></h3>
        </div>
        <div class="bd">
          <ul class="infoList infoListA">
            <li v-for="(item,index) in newsList.slice(0,10)" :key="index"
                style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
            >
              <!--              <router-link target="_blank" :to="{path:'/news/list/edit',query:{id: item.newsId}}">{{ item.newsTitle }}</router-link>-->
              <a @click="btnClick(item)" href="javascript:;"
                 :title="'标题：'+item.newsTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
              >{{ item.newsTitle }}</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 热榜推荐-->
      <div class="sideBox" id="sideZxwz">
        <div class="hd">
          <h3><span>热榜推荐</span></h3>
        </div>
        <div class="bd">
          <ul class="infoList infoListA">
            <li v-for="(item,index) in newsListClick.slice(0,10)" :key="index"
                style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
            >
              <a @click="btnClick(item)" href="javascript:;"
                 :title="'标题：'+item.newsTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
              >{{ item.newsTitle }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 主要内容-->
    <div class="mainContent">
      <div class="mianBox" id="articleList">
        <Breadcrumb></Breadcrumb>
        <div style="border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
          <!-- 列表信息-->
          <div v-if="key==='/news/list'" class="wBd">
            <ul class="newsList" v-for="(item,index) in newsList" :key="index">
              <li>
                <span class="date">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
                <a @click="btnClick(item)" href="javascript:;"
                   :title="'标题：'+item.newsTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
                >{{ vague('2', item.newsTitle) }}</a></li>
              <li v-if="(index+1)%5===0" class="split"></li>
            </ul>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getNewList"
            />
          </div>

          <!-- 正文内容-->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listNews, getNews, updateNewsClick, listNewsClick } from '@/api/news'

export default {
  name: 'News',
  inject:['reloadMain'],  //注入依赖
  components: {},
  data() {
    return {
      newsList: [], // 新闻数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        newsTitle: undefined,
        createBy: undefined,
        status: '0'
      },
      newsListClick: [],
      total: 0// 总条数
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
    this.getNewList();
  },
  methods: {
    //查询新闻列表
    getNewList() {
      listNews(this.queryParams).then(response => {
        this.newsList = response.rows
        this.total = response.total
      })
      listNewsClick(this.queryParams).then(response => {
        this.newsListClick = response.rows
      })
    },

    //点击选中
    btnClick(data) {
      updateNewsClick(data)
      this.$router.push({
        path: '/news/list/edit',
        query: {
          id: data.newsId
        }
      })
      this.reloadMain();
    }
  }
}
</script>

<style scoped>

</style>
